<template>
  <a-menu :mode="mode" :theme="getMenuTheme()" :selectedKeys="[this.$route.path.replace('dashboard','')]">
      <template v-for="item in menu">
        <a-menu-item v-if="item.children.length == 1" :key="item.path" :refs="item.path">
          <router-link :to="item.path">
            <svg-icon v-if="item.meta.icon" :iconClass="item.meta.icon" :className="item.meta.icon" />
            <span>{{ item.meta.title }}</span>
          </router-link>
        </a-menu-item>
        <SubMenu v-else :key="item.path" :subMenu="item" />
    </template>
  </a-menu>
</template>
<script lang="ts">
import { Options,Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { RouteRecordRaw } from 'vue-router'
import SubMenu from "./SubMenu.vue";

@Options({
  components: {
    SubMenu
  },
})
export default class Menu extends Vue {
  @Prop()
  public menu: Array<RouteRecordRaw> = [];
  @Prop()
  public mode:string = "inline";

  public getMenuTheme(): string {
    if ((this as any).$store.getters.styleColor === "dark") {
      return "dark";
    } else {
      return "light";
    }
  }
}
</script>